<template>
  <div id="app">
    <div class="top">
      <div class="top-cont">
        <div class="NavBar" @click="back">
          <img
            style="width: 20px; height: 20px"
            src="../../assets/icon/back.png"
          />
        </div>
        <van-image
          width="7rem"
          height="10rem"
          fit="contain"
          :src="bookInfo.pic"
        />
        <div class="top-info">
          <span>{{ bookInfo.bookname }}</span>
        </div>
        <div style="color: rgb(214, 214, 214)">
          <span>{{ bookInfo.author }}</span>
        </div>
        <div style="color: rgb(214, 214, 214)">
          <span>{{ bookInfo.bookTypeName }} · {{ bookInfo.number }}</span>
        </div>
      </div>
    </div>
    <div class="botton">
      <div class="botton-info">
        <div class="left">
          <span style="font-weight: bolder">{{ bookInfo.stars }}.0分</span>
          <van-rate
            v-model="bookInfo.stars"
            :size="15"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
        </div>
        <div class="right">
          <span style="font-weight: bolder"
            >{{ bookInfo.hits }} 人阅读过此书</span
          >
        </div>
      </div>
      <p class="divider"></p>
      <div class="desc">
        <span>简介</span>
        <div style="margin-top: 14px">
          {{ cutSummary }}
          <div v-if="cutSummary.length < 70" @click="more" class="more">
            (展开)
          </div>
          <div v-if="cutSummary.length >= 70" @click="cut" class="cut">
            (收起)
          </div>
        </div>
      </div>
      <p class="divider"></p>
      <div @click="goChapterList(bookInfo.id)">章节目录</div>
      <!--书友评论-->
      <p class="divider2"></p>
      <div class="comment">
        <div class="com-header">
          <span style="font-weight: bolder">书友热评</span>
          <span
            style="color: rgb(206, 206, 206); font-size: 13px"
            @click="goComments(bookInfo.id)"
            >查看更多({{bookInfo.commentsNum}}) ></span
          >
        </div>
        <div class="comment">
          <div
            v-if="comments.length == 0"
            style="font-size: 14px; padding-top: 24px"
          >
            书籍暂无评论
          </div>
          <div
            v-else
            class="com-conten"
            v-for="(item, index) in comments"
            :key="index"
          >
            <div class="com-user">
              <van-image
                round
                width="30px"
                height="30px"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
              <div class="nik-time">
                <span
                  style="
                    margin-left: 10px;
                    color: rgb(206, 206, 206);
                    font-size: 13px;
                  "
                  >{{ item.username }}</span
                >
                <span style="color: rgb(206, 206, 206); font-size: 13px">{{
                  item.created | dateFormat
                }}</span>
              </div>
            </div>
            <div class="content">
              <span style="font-size: 13px; margin-top: 10px">{{
                item.content
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Readbar />
  </div>
</template>

<script>
import bookrequst from "@/api/book";
import commrequst from "@/api/comment";
import Vue from "vue";
import { Image as VanImage, Rate, Divider, Icon, NavBar, Button } from "vant";
import Readbar from "@/components/Readbar.vue";
Vue.use(VanImage);
export default {
  components: {
    Readbar,
    [Rate.name]: Rate,
    [Divider.name]: Divider,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Button.name]: Button,
  },
  data() {
    return {
      bookId: this.$route.query.bookId,
      bookInfo: {},
      cutSummary: "", // 被剪切的简介
      comments: [],
    };
  },
  created() {
    this.getBookInfo();
    this.getCommentList();
  },
  methods: {
    more() {
      this.cutSummary = this.bookInfo.introduction;
    },
    cut() {
      this.cutSummary = this.bookInfo.introduction.substr(0, 40) + "...";
    },
    back() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    getBookInfo() {
      bookrequst.bookInfo(this.bookId).then((res) => {
        this.bookInfo = res.data.data;
        this.cutSummary = this.bookInfo.introduction.substr(0, 40) + "...";
      });
    },
    goComments(id) {
      this.$router.push({
        path: "/bookcomments",
        query: {
          bookId: id,
        },
      });
    },
    goChapterList(id){
      this.$router.push({
        path: "/chapterlist",
        query: {
          bookId:id,
          bookname:this.bookInfo.bookname
        }
      })
    },
    getCommentList() {
      commrequst.commentList(this.bookId).then((res) => {
        this.comments = res.data.data.slice(0, 4);
      });
    },
  },
  filters: {
    dateFormat(dateStr) {
      var dt = new Date(dateStr);
      var y = dt.getFullYear();
      var m = dt.getMonth() + 1;
      var d = dt.getDate();
      return `${y}-${m}-${d}`;
    },
  }
};
</script>

<style scoped>
#app {
}
.top {
  width: 100%;
  height: 213px;
  padding-top: 50px;
  padding-bottom: 14px;
}
.top::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 213px;
  top: 0;
  left: 0;
  background-image: url("https://easyreadfs.nosdn.127.net/Pg1-8WKmLDeAsicy39-CJg==/8796093024897424361");
  filter: blur(8px);
}
.top-cont {
  position: relative;
  z-index: 1;
}
.info {
  display: flex;
}
.top-info {
  margin-top: 14px;
  color: black;
  font-size: 24px;
}
.botton {
  margin-top: 24px;
  padding-top: 14px;
  background: white;
  height: 100%;
}
.botton-info {
  display: flex;
  justify-content: space-around;
  padding-top: 40xp;
}
.left {
  display: flex;
  flex-direction: column;
}
.right {
  width: 100px;
}
.divider {
  border: 0.1px solid rgb(233, 231, 231);
}
.divider2 {
  height: 14px;
  background: rgb(241, 241, 241);
}
.desc {
  margin: 14px;
}
.more {
  color: orange;
  display: inline;
}
.cut {
  display: inline;
  color: yellowgreen;
}
.comment {
  margin: 14px;
  margin-bottom: 80px;
}
.com-header {
  display: flex;
  justify-content: space-between;
}
.com-user {
  display: flex;
  align-items: center;
}
.com-conten {
  margin-top: 14px;
  margin-bottom: 14px;
}
.nik-time {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.NavBar {
  position: fixed;
  top: 0;
  left: 0;
  margin: 14px;
}
.content {
  display: flex;
  justify-self: start;
  padding-left: 36px;
}
</style>

